<template>
  <div class="contain">
      <maps  @change="handleChange($event)" @landChange="landChange($event)" @baseClick="baseClick" @landClick="landClick" @equipmentClick="equipmentClick" :show="!drawerB&&!drawerL" :clear="isClear" @clearChange="isClear=false"/> 
    <el-drawer title="添加基地" :visible.sync="drawerB" direction="rtl" :before-close="handleClose">
      <div>
         <el-form :model="baseInfo" :rules="rules" label-width="120px" ref="baseForm" >
           <el-form-item label="地基名称" prop="baseName" style="width: 320px;">
               <el-input type="text"  v-model="baseInfo.baseName" placeholder="请输入地基名称" />
           </el-form-item>
           <el-form-item label="面积" prop="area" style="width: 320px;">
               <el-input type="text"  v-model="baseInfo.area" placeholder="请输入面积" >
                  <template slot="append">平方千米</template>
               </el-input>
           </el-form-item>
           <el-form-item label="颜色" prop="color" style="width: 320px;">
               <el-color-picker v-model="baseInfo.color"></el-color-picker>
           </el-form-item>
           <el-form-item style="width: 320px;">
            <el-button @click="handleClose" type="success"  plain>取消</el-button>
            <el-button @click="submitForm('baseForm')" type="success" >确定</el-button>
           </el-form-item>
         </el-form>
      </div>
    </el-drawer>
    <el-drawer title="添加地块" :visible.sync="drawerL" direction="rtl" :before-close="handleClose">
      <div>
         <el-form :model="landInfo" :rules="rules" label-width="120px" ref="landForm" >
            <el-form-item label="地块名称" prop="landName" style="width: 320px;">
                <el-input type="text"  v-model="landInfo.landName" placeholder="请输入地块名称" />
            </el-form-item>
            <el-form-item label="所属基地"  style="width: 320px;">
                <el-input type="text"  disabled v-model="forBasename"  />
            </el-form-item>
            <el-form-item label="面积" prop="landArea" style="width: 320px;">
                <el-input type="text"  v-model="landInfo.landArea" placeholder="请输入面积" >
                    <template slot="append">平方千米</template>
                </el-input>
            </el-form-item>
            <el-form-item label="颜色" prop="color" style="width: 320px;">
                <el-color-picker v-model="landInfo.color"></el-color-picker>
            </el-form-item>
            <el-form-item style="width: 320px;">
              <el-button @click="handleClose" type="success"  plain>取消</el-button>
              <el-button @click="submitForm('landForm')" type="success" >确定</el-button>
            </el-form-item>
         </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import maps from '@/components/divMap.vue'
export default {
  components: {
    maps
  },
  data() {
    return {
      drawerB: false,
      drawerL: false,
      isClear: false,
      forBasename:"",
      baseInfo: {
        baseName: "",
        area: "",
        coords: [],
        color: ""
      },
      activeType:"",
      landInfo: {
        baseId:"",
        landName: "",
        landArea: "",
        color: "",
        coords: []
      },
      rules:{
         baseName: [{ required: true, message: '请输入地基名称', trigger: 'blur' }],
         landName: [{ required: true, message: '请输入地块名称', trigger: 'blur' }],
         color: [{ required: true, message: '请选择颜色', trigger: 'change' }],
         landArea: [{ required: true, message: '请输入地块面积', trigger: 'blur' }],
         area: [{ required: true, message: '请输入面积', trigger: 'blur' }]
         }
    }
  },
  methods: {
    //基地点击
    baseClick(e){
        //  console.log('基地点击',e)
         alert('基地点击:'+e.baseName)
    },
    //地块点击
    landClick(e){
        //  console.log('地块点击',e)
         alert('地块点击:'+e.landName)
      },
    //点位点击
    equipmentClick(e){
      //console.log('点位点击',e)
    },  
    //取消添加
    handleClose(done) {
      this.$confirm('确认关闭并且取消规划？')
        .then(_ => {
           this.isClear=true
           this.drawerB=false
           this.drawerL=false
        })
        .catch(_ => { });
    },
    submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                  let res = null
                  if(!this.landInfo.baseId){
                     res = await addBase(this.baseInfo)
                  }else{
                     res = await addLand(this.landInfo)
                  } 
                   // console.log(res)
                    if(res.code!=200)return
                    this.$message.success('添加成功！')
                    setTimeout(()=>{
                      this.$router.go(0)
                    },1000)
                } else {
                   // console.log('error submit!!');
                    return false;
                }
            });
        },
  }
}
</script>
<style lang="less" scoped>
.contain {
  width: 100%;
  height: 100%;
  .backs {
    width: 100%;
    display: flex;
    padding-top: 20px;

    .back-items {
      background-color: #ffffff;
      padding: 10px 40px;
      cursor: pointer;
      margin: 0 20px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 18px;
    }
  }
}
</style>